<template>
    <div class="shopcar-continer">
			<div class="mui-card" v-for="(item, i) in shopcarList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getGoodsselect[item.id]" @change="slectchagnge(item.id,$store.getters.getGoodsselect[item.id])"></mt-switch>
                        <img :src="item.thumb_path">
                        <div class="infomessage">
                            <h1>{{item.title}}</h1>
                            <p>
                                <span class="price">￥{{item.sell_price}}</span>
                                <numbox style="height:25px" :convalue="$store.getters.getGoodscount[item.id]" :goodsid="item.id"></numbox>
                                <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
                            <p>合计不含运费</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getGoodsPrice.count}}</span> 件，总价<span class="red">￥{{$store.getters.getGoodsPrice.amount}}</span> </p>
                        </div>
                        <mt-button type='danger'>去结算</mt-button>
					</div>
				</div>
			</div>
            
            <p>{{$store.getters.getGoodsselect}}</p>
          
    </div>
</template>

<script>
import numbox from '../subcoment/shopcar-numbox.vue'
export default {
    data() {
        return {
            shopcarList:[]
        }
    },
    created() {
        this.getshopcarList()
    },
    methods: {
        getshopcarList(){
            var carList=[]
            this.$store.state.car.forEach(item => carList.push(item.id));
            if(carList.length<=0){
                return
            }
            this.$http.get('http://www.liulongbin.top:3005/api/goods/getshopcarlist/'+carList.join(',')).then(result=>{
                if(result.body.status==0){
                    this.shopcarList=result.body.message
                    console.log(this.shopcarList)
                }
            })
        },
        remove(id,index){
            // 点击删除
            this.shopcarList.splice(index,1)
            this.$store.commit('removeCar',id)
        },
        slectchagnge(id,val){
            console.log(id+'---------'+val)
            this.$store.commit('updateGoodsSelect',{id,selected:val})
        }
    },
    components:{
        numbox
    }
    
}
</script>

<style lang="scss" scoped>
.shopcar-continer{
        background-color: #eeeeee;
        overflow: hidden;
    .mui-card-content-inner{
       display: flex;
       align-items: center;
       img{
           width: 60px;
           height: 60px;
       }
       h1{
           font-size: 13px
       }
       .infomessage{
           display: flex;
           flex-direction: column;
           justify-content: space-between;
            .price{
           color: red;
           font-weight: 600
       }
       }
      
      
    }
     .jiesuan{
           display: flex;
           justify-content: space-between;
           align-items: center;
           .red{
               color: red;
               font-size: 16px;
               font-weight: bold;
           }
       }
}
</style>
